<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field['options'].displayStyle"
  >
    <div
        class="scene-DRC-trends-widget"
        :style="getStyle('head')"
        :class="getRoomDoctorSize"
    >
      <!--科室信息-->
      <div class="dept-room" :class="getClassName">
        <p class="dept" v-if="deptRoomshow('deptName')">
          {{ getRoomDeptInfo.deptName || "\u00a0" }}
        </p>
        <p class="room" v-if="deptRoomshow('roomName')">
          {{
            getRoomDeptInfo[optionsInfo["roomNameKey"]] ||
            getRoomDeptInfo.roomName ||
            "\u00a0"
          }}
        </p>
        <p class="dept-room-merge">
          <template v-if="deptRoomshow('deptName')">
            {{ getRoomDeptInfo.deptName || "\u00a0" }}
          </template>
          <template v-if="deptRoomshow('roomName')">
            {{
              getRoomDeptInfo[optionsInfo["roomNameKey"]] ||
              getRoomDeptInfo.roomName ||
              "\u00a0"
            }}
          </template>
        </p>
      </div>

      <!--医生信息-->
      <div class="doctor-info">
        <div
            class="doctor-info-item flex-box"
            :class="{
            'doctor-info-item-height': GetspecialStyle('specialStyle'),
          }"
            v-for="item in getRoomDoctorInfo"
            :key="item.workerId"
        >
          <!--医生介绍-->
          <div
              class="picture-introduce"
              :class="{ 'picture-introduce-hideDept': !deptRoomshow('deptName') }"
          >
            <div class="picture flex-box-left module1">
              <img :src="getDoctorPicture(item)" alt="医生"/>
            </div>
            <div class="info flex-box-right">
              <div class="info-inside">
                <div class="name">
                  <ScrollX>
                    {{ item.workerName || "\u00a0" }}
                  </ScrollX>
                </div>
                <div :class="item.workerTitle ? 'level' : 'level_bank'">
                  <ScrollX>
                    {{ item.workerTitle || "\u00a0" }}
                  </ScrollX>
                </div>
              </div>
              <div
                  class="dept"
                  v-if="
                  !(
                    optionsInfo['NumberTypeOptions'] &&
                    optionsInfo['NumberTypeOptions'].show
                  )
                "
              >
                <ScrollX>{{ item.deptName || "\u00a0" }}</ScrollX>
              </div>
              <div
                  class="dept"
                  v-if="
                  optionsInfo['NumberTypeOptions'] &&
                  optionsInfo['NumberTypeOptions'].show
                "
              >
                <ScrollX>{{
                    (item["treatingPatient"] &&
                        item["treatingPatient"].length > 0 &&
                        (item["treatingPatient"][0][
                            optionsInfo["NumberTypeOptions"].showType
                            ]|| item["treatingPatient"][0]['registerObjName'])) ||
                    "\u00a0"
                  }}
                </ScrollX>
              </div>
              <div class="doctor-connect">
                <!-- 滚动组件，如果需要给滚动组件文字添加样式，添加到container的div上即可 -->
                <div class="container">
                  <!-- 组件接受两个参数，content：滚动的文字内容；pageDuration滚动一页需要的时间 -->
                  <ScrollY
                      :content="item.workerIntro || ''"
                      :pageDuration="10"
                  />
                </div>
              </div>
            </div>
          </div>

          <!--医生头像-->
          <div
              class="picture flex-box-left"
              :class="{ 'picture-hideDept': !deptRoomshow('deptName') }"
          >
            <div class="picture-wrap module2">
              <img :src="getDoctorPicture(item)" alt="医生"/>
            </div>
            <div class="doctor-info">
              <div class="item name">
                <ScrollX>
                  {{ item.workerName || "\u00a0" }}
                </ScrollX>
              </div>
              <div :class="item.workerTitle ? 'item level' : 'item level_bank'">
                <ScrollX>
                  {{ item.workerTitle || "\u00a0" }}
                </ScrollX>
              </div>
              <div
                  class="item dept 1111"
                  v-if="
                  !(
                    optionsInfo['NumberTypeOptions'] &&
                    optionsInfo['NumberTypeOptions'].show
                  )
                "
              >
                <ScrollX>{{ item.deptName || "\u00a0" }}</ScrollX>
              </div>
              <div
                  class="item dept 2222"
                  v-if="
                  optionsInfo['NumberTypeOptions'] &&
                  optionsInfo['NumberTypeOptions'].show
                "
              >
                <ScrollX>{{
                    (item["treatingPatient"] &&
                        item["treatingPatient"].length > 0 &&
                        (item["treatingPatient"][0][
                            optionsInfo["NumberTypeOptions"].showType
                            ] || item["treatingPatient"][0]['registerObjName'])) ||
                    "\u00a0"
                  }}
                </ScrollX>
              </div>
            </div>
          </div>

          <!--医生姓名和医生职称-->
          <div
              class="doctor-patient flex-box-right"
              :class="{ 'doctor-patient-hideDept': !deptRoomshow('deptName') }"
          >
            <div class="doctor-name">
              <div class="doctor-name-wrap">
                <div class="item name">
                  <ScrollX>
                    {{ item.workerName || "\u00a0" }}
                  </ScrollX>
                </div>
                <div
                    :class="
                    item.workerTitle ? 'item level 1111' : 'item level_bank'
                  "
                >
                  <ScrollX>
                    {{ item.workerTitle || "\u00a0" }}
                  </ScrollX>
                </div>
              </div>
              <div
                  class="item dept 3333"
                  v-if="
                  !(
                    optionsInfo['NumberTypeOptions'] &&
                    optionsInfo['NumberTypeOptions'].show
                  )
                "
              >
                <ScrollX>{{ item.deptName || "\u00a0" }}</ScrollX>
              </div>
              <div
                  class="item dept  ScrollBoxFour"
                  v-if="
                  optionsInfo['NumberTypeOptions'] &&
                  optionsInfo['NumberTypeOptions'].show
                "
              >
                <ScrollX>{{
                    (item["treatingPatient"] &&
                        item["treatingPatient"].length > 0 &&
                        (item["treatingPatient"][0][
                            optionsInfo["NumberTypeOptions"].showType
                            ] || item["treatingPatient"][0]['registerObjName'])) ||
                    "\u00a0"
                  }}
                </ScrollX>
              </div>
            </div>
            <div class="patient">
              <div class="patient-item-info current-patient">
                <span class="title">就诊</span>
                <span class="content">
                  <template
                      v-for="(itemInfo, itemIndex) in item['treatingPatient']"
                  >
                    <template v-if="itemIndex === 0">
                      {{ itemInfo["orderNo"] || "\u00a0" }}
                      {{ itemInfo["patientName"] || "\u00a0" }}
                    </template>
                  </template>
                </span>
                <span class="content3">
                  <template
                      v-for="(itemInfo, itemIndex) in item['treatingPatient']"
                  >
                    <template v-if="itemIndex === 0">
                      {{ itemInfo["patientName"] || "\u00a0" }}
                      <template v-if="itemInfo['orderNo']">
                        ({{ itemInfo["orderNo"] || "\u00a0" }})
                      </template>
                    </template>
                  </template>
                </span>
              </div>
              <div class="patient-item-info wait-patient">
                <span class="title">候诊</span>
                <template
                    v-for="item in getWaitingPatientList(item.waitingPatientList)"
                >
                  <span class="content">
                    {{ item.orderNo || "\u00a0" }}
                    {{ item.patientName || "\u00a0" }}
                  </span>
                  <span class="content3">
                    {{ item.patientName || "\u00a0" }}
                    <template v-if="!!item.orderNo">
                      ({{ item.orderNo || "\u00a0" }})
                    </template>
                  </span>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import {pxToVw} from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import {buildParentApi} from "@/utils/designer/util";
import ScrollY from "@c/public/seamlessScroll/ScrollY.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";

let buildParent = buildParentApi();
export default {
  name: "scene-DRC-trends-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollY,
    ScrollX,
    CompOperate,
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi(),
    },
  },

  data() {
    return {
      states: true,
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
    };
  },

  computed: {
    //顶部科室和诊室的claasName
    getClassName() {
      let showCol = ["deptName", "roomName"];
      let {defaultShowCol = showCol} = this.optionsInfo;
      let length = this.$lodash.uniqBy(defaultShowCol)?.length;
      switch (length) {
        case 1:
          let doctorInfo = Array();
          let devType = this.devType;
          let roomDoctorInfo = this.$store.getters["getRoomDoctorInfo"];
          if (devType) {
            doctorInfo = roomDoctorInfo.apiData;
          } else {
            doctorInfo = roomDoctorInfo.mockData;
          }
          if (doctorInfo?.length === 2) {
            if (!defaultShowCol.includes("roomName")) {
              return "room-area";
            } else {
              return "room-area3";
            }
          } else {
            return "room-area";
          }
        case 2:
          return "dept-room2";
      }
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "height", pxToVw(info.headHeight));
            Reflect.set(Obj, "backgroundColor", `${info.backgroundColor}`);
            return Obj;
          case "picture":
            Reflect.set(Obj, "height", pxToVw(info.imageHeight));
            Reflect.set(Obj, "width", pxToVw(info.imageWidth));
            Reflect.set(Obj, "borderRadius", pxToVw(info.imageRadius));
            return Obj;
        }
      };
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let temp = Array();
      let listInfo = Array();
      let devType = this.devType;
      let {doctorNumber = 1} = this.optionsInfo;
      let roomDoctorInfo = this.$store.getters["getRoomDoctorInfo"];
      if (devType) {
        listInfo = roomDoctorInfo.apiData;
      } else {
        listInfo = roomDoctorInfo.mockData;
      }
      console.log("listInfolistInfo", listInfo);
      if (!!listInfo?.length) {
        if (devType) {
          if (listInfo?.length >= 6) {
            return listInfo.slice(0, 5);
          } else {
            return listInfo.slice(0);
          }
        } else {
          return listInfo.slice(0, doctorNumber);
        }
      } else {
        return Array(1).fill({});
      }
    },

    // 获取科室信息
    getRoomDeptInfo() {
      let devType = this.devType;
      let roomDoctorInfo = this.$store.getters["getRoomDeptInfo"];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    // 获取后端返回的医生长度
    getRoomDoctorSize() {
      let roomDoctorListInfo = this.getRoomDoctorInfo;
      if (!!roomDoctorListInfo?.length) {
        return `scene-DRC-trends${roomDoctorListInfo.length}-widget`;
      } else {
        return `scene-DRC-trends1-widget`;
      }
    },

    // 候诊患者截取
    getWaitingPatientList() {
      return function (row) {
        if (!!row && !!row.length) {
          return row.slice(0, 1);
        } else {
          return [{}];
        }
      };
    },

    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let isPause = row.isPause;
        let header = "/tpleditor/resource/assets/images/header.png";
        if (!isPause) {
          return row.workerPicture || header;
        } else {
          return this.pause;
        }
      };
    },

    //顶部科室诊室显示控制
    deptRoomshow() {
      return function (row) {
        let showCol = ["deptName", "roomName"];
        let {defaultShowCol = showCol} = this.optionsInfo;
        let showColUniqBy = this.$lodash.uniqBy(defaultShowCol);
        return showColUniqBy.includes(row);
      };
    },
    // 是否需要特殊样式
    GetspecialStyle() {
      return function (row) {
        let specialStyle = this.optionsInfo[row];
        let showCol = ["deptName", "roomName"];
        let {defaultShowCol = showCol} = this.optionsInfo;
        let showColUniqBy = this.$lodash.uniqBy(defaultShowCol);
        if (
            showColUniqBy &&
            showColUniqBy.length === 1 &&
            showColUniqBy[0] === "roomName" &&
            specialStyle
        ) {
          return specialStyle;
        }
        return false;
      };
    },
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDeptInfo":
          console.log(`科室信息-${data}`);
          this.states = true;
          buildParent.executeParentMethod(
              "writeLog",
              JSON.stringify({
                sign: "模板日志-科室信息",
                key: key,
                data: data,
              })
          );
          this.$store.dispatch("setRoomDeptInfo", data);
          break;
        case "roomDoctorInfo":
          console.log(`医生信息-${data}`);
          this.states = true;
          buildParent.executeParentMethod(
              "writeLog",
              JSON.stringify({
                sign: "模板日志-医生信息",
                key: key,
                data: data,
              })
          );
          this.$store.dispatch(
              "setRoomDoctorInfo",
              this.$lodash.cloneDeep(data)
          );
          break;
      }
    },

    handleError(event) {
      const loadedImg = event.target;
      this.states = false;
    },
  },

  watch: {
    field: {
      handler: function (val) {
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
//科室&诊室通用样式
.scene-DRC-trends-widget {
  padding: 28px 30px;
  box-sizing: border-box;
  flex: inherit;
  flex-direction: column;
  justify-content: space-between;
  color: #333;
  height: 150px;
  font-size: 40px;
  background: transparent;
  overflow: hidden;
  //科室
  .dept-room {
    padding: 20px 0 8px 0;
    background: #0059b3;
    border-radius: 20px;
    overflow: hidden;
    min-height: 282px;

    p {
      color: #ffffff;
      text-align: center;
      font-size: 80px;
      font-weight: 500;
      @include singleEllipsis(100%);
      padding: 0 14px;
    }

    .dept {
      font-size: 96px;
      line-height: 112px;
      @include singleEllipsis(100%);
    }

    .room {
      font-size: 120px;
      line-height: 180px;
      @include singleEllipsis(100%);
      min-height: 180px;
    }

    .dept-room-merge {
      display: none;
      width: 100%;
      text-align: center;
    }
  }

  .room-area {
    min-height: 308px;
    display: flex;
    align-items: center;
    align-self: center;
  }

  .dept-area {
    display: flex;
    align-items: center;
    align-self: center;
  }
}

.scrollText {
  ::v-deep .st-inner {
    margin: 0;
  }
}

//一位医生
.scene-DRC-trends1-widget {
  //医生信息
  .doctor-info {
    display: flex;
    margin: 48px 0 0 0;
    min-width: 100%;

    .doctor-info-item {
      display: flex;
      width: 100%;
      flex-direction: column;

      .picture {
        display: none;
      }

      .picture-introduce {
        height: 488px;
        display: flex;
        margin: 0 0 48px 0;
        min-width: auto;

        > .picture {
          flex: inherit;
          border-radius: 20px;
          overflow: hidden;
          width: 358px;
          border: none;
          max-height: 486px;
          background: transparent;
          flex-shrink: 0;
          display: block !important;

          img {
            width: 100%;
          }
        }

        > .info {
          flex: inherit;
          display: flex;
          flex-direction: column;
          width: calc(100% - 358px);
          border: none;
          margin-left: 30px;
          background: transparent;
          font-family: "PingFang SC", sans-serif !important;

          .name {
            font-size: 80px;
            line-height: 120px;
          }

          .level {
            font-size: 50px;
            line-height: 74px;
            padding-top: 8px;
            padding-bottom: 26px;
          }

          .level_bank {
            font-size: 50px;
            height: 74px;
            line-height: 74px;
            padding-top: 8px;
            padding-bottom: 26px;
          }

          .dept {
            display: none;
          }

          .desc {
            height: 260px;
            overflow: hidden;

            p {
              //@include multiLineEllipsis(5);
              font-size: 32px;
              line-height: 52px;
              color: #333333;
              letter-spacing: 2px;
              background: transparent;
            }

            .scrollConent {
              animation: autoScroll 20s linear 2s infinite normal;
            }

            @keyframes autoScroll {
              0% {
                transform: translate3d(0, 0, 0);
              }
              50% {
                transform: translate3d(0, -50%, 0);
              }
              100% {
                transform: translate3d(0, -100%, 0);
              }
            }
          }

          .doctor-connect {
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 258px;

            .container {
              width: 100%;
              height: 100%;
              font-size: 36px;
              line-height: 60px;
              box-sizing: border-box;
              text-indent: 2em;
            }
          }
        }
      }

      .picture-introduce-hideDept {
        > .info .dept {
          display: block;
          font-family: "PingFang SC", sans-serif !important;
          font-size: 52px;
          color: #0059b3;
          line-height: 72px;
          text-align: left;
          margin-bottom: 20px;
        }

        .info-inside {
          display: flex;
          line-height: inherit !important;
          font-family: "PingFang SC", sans-serif !important;

          .name {
            white-space: nowrap;
            width: 400px;
            overflow: hidden;
          }

          .level {
            font-size: 30px;
            color: #ffffff;
            border-radius: 12px;
            margin-left: 30px;
            margin-top: 18px;
            height: 68px;
            line-height: 68px;
            text-align: left;
            padding: 4px 14px;
            background: rgba(0, 89, 179, 1);
            max-width: 250px;
          }

          .level_bank {
            font-size: 30px;
            color: #ffffff;
            border-radius: 12px;
            margin-left: 30px;
            margin-top: 18px;
            height: 68px;
            line-height: 68px;
            text-align: left;
            padding: 4px 14px;
          }
        }
      }

      .doctor-patient {
        flex: inherit;
        display: flex;
        flex-direction: column;
        width: calc(100%);
        border: none;
        height: 100%;
        background: transparent;
        padding-left: 0 !important;
        // 医生名字
        .doctor-name {
          display: none;
        }

        //患者信息
        .patient {
          .patient-item-info {
            display: flex;
            overflow: hidden;
            border-radius: 20px;
            width: 100%;
            height: 324px;

            span {
              font-weight: 440;
            }

            .title {
              color: white;
              padding: 68px 28px;
              line-height: 84px;
              height: 100%;
              flex: inherit;
              display: flex;
              align-items: center;
              align-self: center;
              text-align: center;
              width: 114px !important;
              font-size: 60px;
              border: none;
              flex-shrink: 0;
              font-family: "PingFang SC", sans-serif !important;
            }

            .content {
              align-items: center;
              flex-direction: column;
              align-self: center;
              justify-content: left;
              background: transparent;
              border: none;
              display: block;
              width: calc(100% - 114px) !important;
              font-size: 126px;
              line-height: 86px;
              flex-shrink: 0;
              text-align: center;
              white-space: nowrap;
            }

            .content3 {
              display: none;
            }
          }

          .current-patient {
            background: rgba(183, 205, 227, 1);

            .title {
              line-height: 70px;
              background: rgba(0, 89, 179, 1);
            }

            .content {
              color: rgba(0, 89, 179, 1);
            }
          }

          .wait-patient {
            margin-top: 44px;
            min-width: auto;
            background: rgba(234, 227, 208, 1);

            .title {
              background: rgba(229, 134, 2, 1);
            }

            .content {
              color: rgba(229, 134, 2, 1);
              line-height: 106px !important;
            }
          }
        }
      }

      .doctor-patient-hideDept2 {
        .patient {
          .current-patient {
            height: 318px;
          }

          .wait-patient {
            height: 318px;
          }
        }
      }
    }
  }
}

//两位医生
.scene-DRC-trends2-widget {
  .dept-room {
    height: 340px;
    min-height: 340px;
  }

  .dept-room2 {
    height: 340px;
    min-height: 340px;

    .dept {
      padding-top: 18px;
    }

    .room {
      padding-top: 18px;
    }
  }

  .room-area3 {
    height: 210px;
    min-height: 210px;
  }

  .room-area {
    height: 340px;
    min-height: 340px;
  }

  //医生信息
  .doctor-info {
    display: flex;
    margin: 70px 0 0 0;
    min-width: auto;
    flex-direction: column;

    .doctor-info-item {
      &:last-child {
        margin-top: 100px;

        .picture {
          order: 1;
        }

        .doctor-patient {
          padding-left: 0 !important;
          padding-right: 30px;

          .name {
            text-align: right !important;
          }
        }
      }

      .picture-introduce {
        display: none;
      }

      .picture {
        display: flex;
        border-radius: 20px;
        overflow: hidden;
        width: 390px;
        //height: 486px;
        height: 534px;
        border: none;
        align-self: flex-end;
        background: transparent;

        .picture-wrap {
          width: 100%;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          display: none;
        }
      }

      .picture-hideDept {
        // width: 422px !important;
        // height: 590px !important;
        width: 390px !important;
        height: 560px !important;
      }

      .doctor-info {
        display: none;
      }

      .doctor-patient {
        flex: inherit;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(100% - 432px);
        padding-left: 30px;
        border: none;
        // height: 100%;
        background: transparent;

        // 医生名字
        .doctor-name {
          font-size: 80px;
          line-height: 102px;
          // margin-bottom: 16px;

          .doctor-name-wrap {
            display: flex;

            .name {
              font-size: 80px;
              color: #333333;
              line-height: 90px;
              text-align: left;
              font-style: normal;
              // margin-bottom: 30px;
              width: 500px;
              white-space: nowrap;

              overflow: hidden;
              font-family: "PingFang SC", sans-serif !important;
            }

            .level {
              font-size: 33px;
              color: #ffffff;
              text-align: left;
              flex-basis: auto;
              margin-left: 32px;
              padding: 4px 14px;
              border-radius: 10px;
              height: 80px;
              line-height: 80px;
              display: block;
              font-family: "PingFang SC", sans-serif !important;
              background: rgba(0, 89, 179, 1);
              width: 200px;
              max-width: 200px;
            }

            .level_bank {
              font-size: 33px;
              color: #ffffff;
              text-align: left;
              flex-basis: auto;
              margin-left: 32px;
              padding: 4px 14px;
              border-radius: 10px;
              height: 80px;
              line-height: 80px;
              display: block;
              font-family: "PingFang SC", sans-serif !important;
            }
          }

          .dept {
            display: none;
          }
        }

        //患者信息
        .patient {
          .patient-item-info {
            display: flex;
            overflow: hidden;
            border-radius: 20px;
            width: 100%;

            .title {
              color: white;
              padding: 28px 26px;
              height: 100%;
              flex: inherit;
              display: flex;
              align-items: center;
              text-align: center;
              flex-basis: 124px !important;
              font-size: 60px;
              border: none;
              line-height: 72px;
              flex-shrink: 0;
              font-family: "PingFang SC", sans-serif !important;
              text-orientation: upright;
              writing-mode: tb;
            }

            .content {
              align-items: center;
              flex-direction: column;
              align-self: center;
              justify-content: left;
              background: transparent;
              border: none;
              display: block;
              width: calc(100% - 124px) !important;
              font-size: 62px;
              line-height: 86px;
              text-align: center;
              font-weight: normal;
              white-space: nowrap;
            }

            .content3 {
              display: none;
            }
          }

          .current-patient {
            height: 170px;
            background: rgba(183, 205, 227, 1);

            .title {
              background: rgba(0, 89, 179, 1);
            }

            .content {
              color: rgba(0, 89, 179, 1);
            }
          }

          .wait-patient {
            margin-top: 44px;
            min-width: auto;
            height: 180px;
            background: rgba(234, 227, 208, 1);

            .title {
              background: rgba(229, 134, 2, 1);
            }

            .content {
              color: rgba(229, 134, 2, 1);
              line-height: 106px !important;
            }
          }
        }
      }

      .doctor-patient-hideDept {
        width: calc(100% - 462px);

        .doctor-name .dept {
          display: block;
          font-size: 48px;
          color: #0059b3;
          line-height: 72px;
          text-align: left;
          font-family: "PingFang SC", sans-serif !important;
        }
      }
    }

    .doctor-info-item-height {
      &:last-child {
        margin-top: 50px;
      }
    }
  }
}

//三位医生
.scene-DRC-trends3-widget {
  .dept-room {
    height: 286px;
    min-height: 286px;
    max-height: 286px;

    .dept {
      padding-top: 8px;
    }
  }

  .room-area {
    height: 286px;
    min-height: 286px;
    max-height: 286px;
  }

  .doctor-info {
    height: calc((100% - 400px) / 3);

    .doctor-info-item {
      background: white;
      border-radius: 20px;
      padding: 32px 40px;
      box-sizing: border-box;
      margin-bottom: 30px;

      .picture-introduce {
        display: none;
      }

      &:first-child {
        margin-top: 30px;
      }

      .picture {
        border-radius: 8px;
        flex-basis: 244px;
        height: 320px;
        flex-shrink: 0;
        overflow: hidden;
        border: 2px #dcdfe6 solid;

        .picture-wrap {
          width: 100%;
          display: contents;
        }

        .doctor-info {
          display: none;
        }

        img {
          width: 100%;
          height: 100%;
        }

        .name {
          display: none;
        }
      }

      .picture-hideDept {
        display: flex;
        align-items: flex-end;
        align-self: flex-end;
      }

      .doctor-patient {
        font-size: 40px;
        border: none;
        margin-left: 44px;
        flex-shrink: 0;
        flex-basis: calc(100% - 288px);
        flex-direction: column;

        .doctor-name {
          display: flex;

          .doctor-name-wrap {
            display: flex;
            flex-direction: row;

            .name {
              font-size: 64px;
              line-height: 102px;
              margin-right: 30px;
              max-width: 280px;
              font-family: "PingFang SC", sans-serif !important;
            }

            .level {
              background: rgba(0, 89, 179, 1);
              color: white;
              font-size: 30px;
              border-radius: 10px;
              padding: 14px 10px;
              align-items: center;
              max-width: 280px;
              text-align: center;
              align-self: baseline;
              margin-top: 22px;
            }

            .level_bank {
              color: white;
              font-size: 30px;
              border-radius: 10px;
              // padding: 14px 10px;
              align-items: center;
              max-width: 280px;
              text-align: center;
              align-self: baseline;
              margin-top: 22px;
            }
          }

          .dept {
            font-size: 50px;
            color: #0059b3;
            line-height: 55px;
            // line-height:70px; 
            text-align: center;
            margin-top: 22px;
            @include singleEllipsis(100%);
            display: none;
            @include fontWeight();
          }
        }

        .patient {
          width: 100%;
          margin-top: 18px;
          background: linear-gradient(
                  90deg,
                  rgba(231, 235, 242, 0.77) 0%,
                  rgba(216, 216, 216, 0) 100%
          );
          border-radius: 20px;
          padding: 0 24px;

          .patient-item-info {
            font-size: 46px;
            line-height: 70px;

            .title {
              padding-right: 20px;

              &:after {
                content: ":";
              }
            }

            .content {
              display: none;
            }

            span {
              display: inline-block;
              white-space: nowrap;
              line-height: 100px;
            }
          }

          .current-patient {
            color: rgba(0, 89, 179, 1);
          }

          .wait-patient {
            color: rgba(229, 134, 2, 1);
          }
        }
      }

      .doctor-patient-hideDept {
        .doctor-name {
          .doctor-name-wrap {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: start;

            .name {
              width: auto;
              // overflow-x: hidden;
              white-space: nowrap;
              font-size: 60px;
            }

            .level {
              width: auto;
              padding: 10px 24px;
              font-size: 30px;
              align-self: baseline;
              margin-top: 0 !important;
            }
          }

          .dept {
            display: block;
            font-size: 40px;
            font-weight: normal;
            font-family: "PingFang SC", sans-serif !important;
          }
        }

        .patient .patient-item-info {
          span {
            font-size: 46px !important;
            line-height: 86px !important;
          }
        }
      }
    }
  }
  .ScrollBoxFour{
    ::v-deep .scrollText{
      display: flex;
      align-items: flex-end;
    }
  }
}

//四位医生
.scene-DRC-trends4-widget {
  .dept-room {
    padding: 34px 0;
    height: 164px;
    line-height: 164px;
    min-height: 164px;
    display: flex;
    align-items: center;
    align-self: center;

    .dept {
      display: none !important;
    }

    .room {
      display: none !important;
    }

    .dept-room-merge {
      display: block !important;
      font-size: 112px;
    }
  }

  .room-area {
    height: 164px;
    line-height: 164px;
    min-height: 164px;
    display: flex;
    align-items: center;
    align-self: center;

    .dept {
      display: block;
    }

    .dept-room-merge {
      display: none;
    }
  }

  .doctor-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: none !important;

    .doctor-info-item {
      background: white;
      border-radius: 20px;
      padding: 32px 40px;
      flex-direction: column !important;
      width: calc(50%) !important;
      flex-shrink: 0;
      box-sizing: border-box;
      min-width: inherit;
      margin: 30px 0 0 0;
      justify-content: space-between;
      border: none !important;

      &:nth-child(odd) {
        margin-left: 0;
        margin-right: 14px;
        width: calc(50% - 14px) !important;
      }

      &:nth-child(even) {
        margin-right: 0;
        margin-left: 14px;
        width: calc(50% - 14px) !important;
      }

      .picture-introduce {
        display: none;
      }

      .picture {
        flex-basis: 266px;
        width: 100%;
        flex-shrink: 0;
        border: none;
        overflow: hidden;

        .picture-wrap {
          border-radius: 12px;
          width: 196px;
          flex-shrink: 0;
          border: 2px #dcdfe6 solid;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .doctor-info {
          width: calc(100% - 210px);
          display: flex;
          align-self: flex-start;

          .item {
            line-height: 84px;
            font-size: 50px;
            align-items: center;
            align-self: center;
            text-align: left;
            margin-left: 24px;
            white-space: nowrap;
            font-family: "PingFang SC", sans-serif !important;
            width: 180px;
          }

          .level {
            font-size: 30px;
            flex-shrink: 0;
            color: white;
            line-height: normal;
            padding: 4px 12px;
            background: rgba(0, 89, 179, 1);
            border-radius: 8px;
            overflow: hidden;
            width: 160px;
          }

          .level_bank {
            font-size: 30px;
            flex-shrink: 0;
            color: white;
            line-height: normal;
            padding: 4px 12px;
            border-radius: 8px;
            overflow: hidden;
          }

          .dept {
            font-size: 30px;
            @include singleEllipsis(100%);
            display: none;
            color: rgba(0, 89, 179, 1);
            @include fontWeight();
          }
        }
      }

      .picture-hideDept {
        .doctor-info {
          .dept {
            display: block;
          }
        }
      }

      .doctor-patient {
        font-size: 40px;
        flex-shrink: 0;
        margin-top: 16px;
        flex-basis: calc(100% - 242px);
        flex-direction: column;
        border: none !important;

        .doctor-name {
          display: none;

          .name {
            font-size: 80px;
            line-height: 112px;
            font-weight: 500;
            white-space: nowrap;
            margin-right: 30px;
          }

          .level {
            background: rgba(0, 89, 179, 1);
            color: white;
            font-size: 50px;
            border-radius: 10px;
            padding: 24px 20px;
            align-self: center;
            align-items: center;
          }

          .level_bank {
            color: white;
            font-size: 50px;
            border-radius: 10px;
            padding: 24px 20px;
            align-self: center;
            align-items: center;
          }
        }

        .patient {
          width: 100%;
          margin-top: 10px;
          border-radius: 20px;
          border: none !important;

          //患者信息
          .patient-item-info {
            line-height: 70px;
            border-radius: 18px;
            overflow: hidden;

            span {
              display: inline-block;
            }

            .title {
              width: 70px;
              line-height: 54px;
              font-size: 40px;
              padding: 14px 16px;
              text-align: center;
              font-family: "PingFang SC", sans-serif !important;
            }

            .content {
              white-space: nowrap;
              padding-left: 18px;
              align-items: center;
              @include singleEllipsis(100%);
              display: flex;
            }

            .content3 {
              display: none;
            }
          }

          .current-patient {
            background: rgba(0, 89, 179, 0.2);
            display: flex;
            color: rgba(0, 89, 179, 1);

            .title {
              color: white;
              background: rgba(0, 89, 179, 1);
            }
          }

          .wait-patient {
            background: rgba(229, 134, 2, 0.2);
            margin-top: 34px;
            display: flex;
            color: rgba(229, 134, 2, 1);

            .title {
              color: white;
              background: rgba(229, 134, 2, 1);
            }
          }
        }
      }
    }
  }
}

//五位医生
.scene-DRC-trends5-widget {
  //科室部分
  .dept-room {
    padding: 34px 0 0 0;
    height: 204px;

    .dept {
      line-height: 126px;
      padding: 0 30px;
    }

    .room {
      font-size: 118px;
      line-height: 126px;
      min-height: auto;
    }
  }

  .room-area {
    height: 280px;
    min-height: inherit;
    display: flex;
    align-items: center;
    align-self: center;

    .room {
      font-size: 120px;
    }
  }

  .doctor-info-item {
    background: white;
    border-radius: 8px;
    padding: 22px 24px;
    box-sizing: border-box;
    margin-bottom: 18px;

    &:first-child {
      margin-top: 30px;
    }

    .picture-introduce {
      display: none;
    }

    .picture {
      flex-basis: 144px;
      height: 196px;
      flex-shrink: 0;
      overflow: hidden;
      border-radius: 8px;
      border: 2px #dcdfe6 solid;

      .picture-wrap {
        width: 100%;
        height: 100%;
      }

      .doctor-info {
        display: none;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .name {
        display: none;
      }
    }

    .doctor-patient {
      font-size: 40px;
      border: none;
      margin-left: 20px;
      flex-shrink: 0;
      flex-basis: calc(100% - 164px);
      flex-direction: column;

      .doctor-name {
        display: flex;
        justify-content: space-between;

        .doctor-name-wrap {
          display: flex;
          min-width: 460px;
          overflow: hidden;
          white-space: nowrap;

          .name {
            overflow: hidden;
            font-size: 52px;
            line-height: 74px;
            margin-right: 30px;
            width: 200px;
            font-family: "PingFang SC", sans-serif !important;
          }

          .level {
            background: rgba(0, 89, 179, 1);
            color: white;
            font-size: 34px;
            border-radius: 10px;
            padding: 14px 20px;
            align-self: center;
            align-items: center;
            position: relative;
            text-align: center;
            width: 180px;
            max-width: 180px;
          }

          .level_bank {
            color: white;
            font-size: 34px;
            border-radius: 10px;
            padding: 14px 20px;
            align-self: center;
            align-items: center;
            position: relative;
            text-align: center;
          }
        }

        .dept {
          margin-top: 12px;
          align-items: end;
          font-weight: 500;
          font-size: 40px;
          color: #0059b3;
          line-height: 56px;
          text-align: right;
          display: none;
          min-width: calc(100% - 460px);

          .scrollText {
            text-align: right;
            align-self: end;
            align-items: end;
          }
        }
      }

      .patient {
        margin-top: 18px;
        background: linear-gradient(
                90deg,
                rgba(231, 235, 242, 0.77) 0%,
                rgba(216, 216, 216, 0) 100%
        );
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .patient-item-info {
          font-size: 42px;
          line-height: 42px;
          display: flex;
          flex-shrink: 0;
          flex-direction: row;
          flex-basis: 49%;
          width: 49%;

          &:first-child {
            padding-left: 16px;
            padding-right: 24px;
          }

          span {
            display: inline-block;
            line-height: 96px;
            font-size: 38px;
          }

          .title {
            padding-right: 16px;
            flex-shrink: 0;
            flex-wrap: nowrap;
            white-space: nowrap;
            flex-basis: 110px;

            &::after {
              content: ":";
            }
          }

          .content {
            display: none;
          }

          .content3 {
            @include singleEllipsis(calc(100% - 110px));
            display: block;
            flex-shrink: 0;
          }
        }

        .current-patient {
          display: flex;
          flex-direction: row;
          color: rgba(0, 89, 179, 1);
        }

        .wait-patient {
          color: rgba(229, 134, 2, 1);
        }
      }
    }

    //隐藏科室的下部分内容隐藏
    .doctor-patient-hideDept {
      .doctor-name .dept {
        display: block;
        font-weight: normal;
        font-family: "PingFang SC", sans-serif !important;
      }
    }
  }
  .ScrollBoxFour{
    margin-top: 0 !important;
    ::v-deep .scrollText{
      align-items: center !important;
    }
  }
}
</style>
